<template>
  <div ref="rootDiv" style="height: 80vh;">
    <div shadow="never">
      <!-- form 表单 -->
      <div ref="fixedHead">
        <el-form label-width="80px" size="mini">
          <el-row :gutter="20">
            <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="5">
              <el-form-item label="客户名称">
                <el-input v-model="invoiceCondition.custName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="5">
              <el-form-item label="发票号码">
                <el-input v-model="invoiceCondition.goldtaxNum"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="16" :md="12" :lg="12" :xl="8">
              <el-form-item label="开票日期">
                <el-row>
                  <el-col :span="11">
                    <el-date-picker
                      v-model="invoiceCondition.billGdateStart"
                      type="date"
                      placeholder="开票日期起"
                    ></el-date-picker>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-date-picker
                      v-model="invoiceCondition.billGdateEnd"
                      placeholder="开票日期止"
                      type="date"
                    ></el-date-picker>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :md="12" :lg="24" :xl="24">
              <el-form-item style="float:right" label-width="0px" >
                <div style="display: flex;">
                  <el-button type="primary" icon="el-icon-search" @click="getInvoices()">
                    查询
                  </el-button>
                  <el-button icon="el-icon-refresh-left" plain @click="reset()">
                    重置
                  </el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <div shadow="never" style="margin-bottom:30px; padding-bottom: 10px">
      <!-- 表格 -->
      <div class="query">
        <el-table
          border
          ref="invTable"
          v-loading="tableLoading"
          :data="tableData"
          :height="this.height"
        >
          <el-table-column
            prop="goldtaxCode"
            label="发票代码"
            width="100"
          ></el-table-column>
          <el-table-column label="发票号码" prop="goldtaxNum" width="180"></el-table-column>
          <el-table-column label="开票日期" prop="billGdate" width="100">
            <template slot-scope="scope">
              {{stringKprq(scope.row.billGdate)}}
            </template>
          </el-table-column>
          <el-table-column label="发票类型" prop="invoiceType"  align="center" width="90">
            <template slot-scope="scope">
              <div>
                <el-tag v-if="scope.row.invoiceType == '3'">电子专票</el-tag>
                <el-tag v-if="scope.row.invoiceType == '4'" type="success">
                  电子普票
                </el-tag>
                <el-tag v-if="scope.row.invoiceType == '5'" type="info">
                  外销发票
                </el-tag>
                <el-tag v-if="scope.row.invoiceType == '1'" type="warning">
                  纸质专票
                </el-tag>
                <el-tag v-if="scope.row.invoiceType == '2'" type="danger">
                  纸质普票
                </el-tag>
                <el-tag v-if="scope.row.invoiceType == 'K'" effect="dark">
                  数电专票
                </el-tag>
                <el-tag v-if="scope.row.invoiceType == 'L'" type="success" effect="dark">
                  数电普票
                </el-tag>
                <el-tag v-if="scope.row.invoiceType == 'I'" type="warning" effect="dark">
                  数电纸专
                </el-tag>
                <el-tag v-if="scope.row.invoiceType == 'J'" type="danger" effect="dark">
                  数电纸普
                </el-tag>
                <el-tag v-if="scope.row.invoiceType == '8'" type="danger" effect="dark">
                  机动车专票
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="custName" label="购方名称" width="240" show-overflow-tooltip></el-table-column>
          <el-table-column prop="custTaxcode" label="购方税号" width="180"></el-table-column>
          <el-table-column prop="zamountWsj" label="未税金额(净)" width="110" align="right"></el-table-column>
          <el-table-column prop="zamountSej" label="税额(净)" width="100" align="right"></el-table-column>
          <el-table-column prop="zamountHsj" label="含税金额(净)" width="110" align="right"></el-table-column>
          <el-table-column prop="zamountHzws" label="行折未税金额" width="115" align="right"></el-table-column>
          <el-table-column prop="zamountHzse" label="行折税额" width="100" align="right"></el-table-column>
          <el-table-column prop="zamountHzhs" label="行折含税金额" width="110" align="right"></el-table-column>
          <el-table-column prop="zamountWsy" label="未税金额(原)" width="110" align="right"></el-table-column>
          <el-table-column prop="zamountSey" label="税额(原)" width="100" align="right"></el-table-column>
          <el-table-column prop="zamountHsy" label="含税金额(原)" width="110" align="right"></el-table-column>
          <el-table-column prop="orgName" label="销方名称" width="200"></el-table-column>
          <el-table-column prop="orgTaxcode" label="销方税号" width="200"></el-table-column>
          <el-table-column prop="custAddress" label="购方地址" width="300" show-overflow-tooltip></el-table-column>
          <el-table-column prop="custTelephone" label="购方电话" width="150"></el-table-column>
          <el-table-column prop="custBankname" label="购方开户行" width="250" show-overflow-tooltip></el-table-column>
          <el-table-column prop="custBankaccount" label="购方银行账户" width="200"></el-table-column>
          <el-table-column prop="userName" label="开票人" width="100"></el-table-column>
          <el-table-column prop="payeeName" label="收款人" width="100"></el-table-column>
          <el-table-column prop="checkName" label="复核人" width="100"></el-table-column>
          <el-table-column fixed="right" label="操作" width="70">
            <template #default="{row}">
              <el-button
                @click="chooSell(row)"
                type="text"
                size="small">
                选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- <Paging :page="invoiceCondition" @change="handleCurrentChange"></Paging> -->
    </div>
  </div>
</template>

<script>
import {stringKprq} from '@/utils'

export default {
  name: 'InvoiceRefer',
  data() {
    return {
      height:0, // 表格高度
      showDetail: false,
      invoiceHead: {}, // 回填的数据
      invoiceCondition: {
        orgId: '', // 组织id
        custName: '', // 购方名称 客户名称
        groupStatus: '2', // 已开发票状态为2
        billGdateStart: '', // 开票日期
        billGdateEnd: '', // 开票日期
        goldtaxNum: '', // 发票号码
        rowCount: 0,
        pageSize: 20,
        pageNum: 1,
      },
      tableData: this.$store.state.invioceLists, 
      tableLoading: false, // 表格loading
    }
  },
  created() {
    this.$nextTick(()=>{
      this.height=(this.$refs.rootDiv.offsetHeight-this.$refs.fixedHead.offsetHeight)
    })
  },
  methods: {
    stringKprq(val) {
      if(val) return stringKprq(val)
      return val
    },
    async getInvoices() {
      // this.tableLoading = true

      // let {data: result} = await getInvoices(this.invoiceCondition)
      // if (result.success) {
      //   this.tableData = result.data.invoices
      //   this.invoiceCondition.rowCount = result.data.rowCount
      //   this.tableLoading = false
      // } else {
      //   this.$message.error('查询失败!')
      //   this.tableLoading = false
      // }
    },
    chooSell(row) {
      this.getInvoiceDetail(row.docNum, row.groupNum)
      this.$parent.butShow(false) // 选择发票 回填红字
    },
    async getInvoiceDetail(docNum, groupNum) {
      // let {data: result} = await getInvoiceDetail(docNum, groupNum, true)
      // if (result.success) {
      //   this.invoiceHead = result.data
      //   this.invoiceHead.invoiceRedReqm = '21',  //红字申请原因 11:购方申请 21:销方申请 
      //   this.invoiceHead.invoiceRedFpdm = result.data.goldtaxCode // 蓝字发票号码
      //   this.invoiceHead.invoiceRedFphm = result.data.goldtaxNum // 蓝字发票代码
      //   this.invoiceHead.invoiceRedKprq = result.data.billGdate // 蓝字开票日期
      //   this.invoiceHead.invoiceSplitLines = result.data.invoiceSplitLines
      //   this.invoiceHead.zamountWsj = -result.data.zamountWsj
      //   this.invoiceHead.zamountSej = -result.data.zamountSej
      //   this.invoiceHead.zamountHsj = -result.data.zamountHsj
      //   this.invoiceHead.invoiceSplitLines.forEach( item => {
      //     console.log(item);
      //     item.quantity = -item.quantity
      //     item.zamountHsj = -item.zamountHsj
      //     item.zamountWsj = -item.zamountWsj
      //     item.zamountSej = -item.zamountSej
      //   });
      //   this.$emit('chooseD', this.invoiceHead)
      //   console.log(this.invoiceHead, '选中后的数据111---')
      // } else {
      //   this.$message.error(result.msg)
      // }
    },
    handleCurrentChange(val) {
      this.invoiceCondition.pageSize = val.pageSize
      this.invoiceCondition.pageNum = val.pageNum
      // this.getInvoices()
    },
    reset() {
      this.invoiceCondition = {
        orgId: '', // 组织id
        custName: '', // 购方名称 客户名称
        groupStatus: '2', // 已开发票状态为2
        billGdateStart: '', // 开票日期
        billGdateEnd: '', // 开票日期
        goldtaxNum: '', // 发票号码
        rowCount: 0,
        pageSize: 20,
        pageNum: 1,
      }
      // this.getInvoices()
    },
  },
}
</script>

<style scoped lang="scss">
  .all {
    padding: 10px 20px;
  }
  .line{
    text-align: center
  }
.invoice {
  padding: 20px 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-right: 5px solid #50bfff;
  border-radius: 5px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  max-height: 100vh;
  overflow: auto;

  .head {
    h4 {
      border-left: 5px solid #50bfff;
      padding: 0px 20px;
      opacity: 0.7;

      span {
        margin-right: 20px;
      }
    }
  }
}
::v-deep{
  .el-date-editor.el-input{
    width: 100%;
  }
  .el-card__body{
    padding-bottom: 0;
  }
  .el-select{
    width: 100%;
  }
  .el-form-item--mini.el-form-item{
    margin-bottom: 12px;
  }
  .el-dialog--center .el-dialog__body{
    padding: 20px 10px;
  }
}
</style>
